<template>
  <uni-popup ref="area" type="center">
    <view class="package" style="width:630rpx;">
      <view class="space-between detail" v-for="item in list" :key="item.id">
        <view>{{item.name}}</view>
        <view>{{item.price}}元/公斤</view>
      </view>
    </view>
  </uni-popup>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { getRegionAmountRechargePrice } from '@/gql/warehouse';
  import { showLoading } from '@/utils/prompt';
  import { toPublish } from '@mqtt';
  const area = ref(null)
  const list = ref()
  init()
  function init() {
    showLoading()
    const payload = {
      query: getRegionAmountRechargePrice
    };
    toPublish(
      'ql/driver/getRegionAmountRechargePrice',
      payload,
      (obj : any) => {
        const { getRegionAmountRechargePrice } = obj.data;
        list.value = getRegionAmountRechargePrice
      }
    );
  }
  function open() {
    area.value.open()
  }
  defineExpose({
    open
  });
</script>

<style scoped lang="less">
  .detail {
    padding: 10rpx 0px;
    box-sizing: border-box;
  }
</style>